<template>
	<view>
		<view class="step">
			<Dsteps :titles="titles" :isActive="1"></Dsteps>
		</view>
		<view class="form clearfix">
			
			<view class="con">
				<view class="top">
					<view>母亲姓名</view>
					<view class="padd">*</view>
					<input class="uni-input" placeholder="请输入母亲姓名" v-model="form.mother_name" />
				</view>
				<view class="top">
					<view>手机号码</view>
					<view class="padd">*</view>
					<input class="uni-input" placeholder="请输入手机号"  type="number" v-model.number="form.mother_mobile" />
				</view>
				<view class="top">
					<view>验证码</view>
					<view class="padd">*</view>
					<input class="uni-input" placeholder="请输入验证码" type="number" style="padding-right: 10rpx;" v-model.number="form.mother_mobile_code"/>
					<SendCode :phone="form.mother_mobile - 0"></SendCode>
				</view>
			</view>
			<view class="form-fa">
				<view class="top">
					<view>父亲姓名</view>
					<view class="padd"></view>
					<input class="uni-input" placeholder="请输入父亲姓名" v-model="form.father_name" />
				</view>
				<view class="top">
					<view>手机号码</view>
					<view class="padd"></view>
					<input class="uni-input" placeholder="请输入手机号" type="number" v-model.number="form.father_mobile" />
				</view>
				<view class="top">
					<view>验证码</view>
					<view class="padd"></view>
					<input class="uni-input" placeholder="请输入验证码" type="number" style="padding-right: 10rpx;" v-model.number="form.father_mobile_code" />
					<SendCode :phone="form.father_mobile - 0"></SendCode>
				</view>
			</view>
			<view class="baby">
				<view class="top">
					<view>宝宝大名</view>
					<view class="padd">*</view>
					<input class="uni-input" placeholder="请输入宝宝大名" v-model.number="form.baby_name" />
				</view>
				<view class="top">
					<view>宝宝小名</view>
					<view class="padd">*</view>
					<input class="uni-input" placeholder="请输入宝宝小名" v-model.number="form.baby_nickname" />
				</view>
				<view class="top">
					<view>出生日期</view>
					<view class="padd">*</view>
					<picker class="date" mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange($event, 'one')">
						<view class="uni-input" style="color: #999;" v-show="!isShowDate1">请选择出生日期</view>
						<view class="uni-input" v-show="isShowDate1" style="color: #000;">{{date1}}</view>
					</picker>
				</view>
				<view class="top">
					<view>宝宝性别</view>
					<view class="padd">*</view>
					<view class="date">
						<radio-group @change="radioChange" class="flex">
							<label class="flex" style="padding-left: 20rpx;" v-for="(item, index) in sex" :key="item.id">
								<view>
									<radio :value="item.id + ''" :checked="index === current1" />
								</view>
								<view style="color: #999;">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>
			
			<view class="baby">
				<view class="top">
					<view>宝宝大名</view>
					<input class="uni-input" placeholder="请输入宝宝大名" v-model="form.baby2_name" />
				</view>
				<view class="top">
					<view>宝宝小名</view>
					<input class="uni-input" placeholder="请输入宝宝小名" v-model="form.baby2_nickname" />
				</view>
				<view class="top">
					<view>出生日期</view>
					<picker class="date" mode="date" :value="date2" :start="startDate" :end="endDate" @change="bindDateChange($event, 'two')">
						<view class="uni-input" style="color: #999;" v-show="!isShowDate2">请选择出生日期</view>
						<view class="uni-input" v-show="isShowDate2" style="color: #000;">{{date2}}</view>
					</picker>
				</view>
				<view class="top">
					<view>宝宝性别</view>
					<view class="date">
						<radio-group @change="radioChangeTwo" class="flex">
							<label class="flex" style="padding-left: 20rpx;" v-for="(item, index) in sex" :key="item.id">
								<view>
									<radio :value="item.id + ''" :checked="index === current2" />
								</view>
								<view style="color: #999;">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>
		</view>
		<view style="margin: 40rpx 0;" @click="startSign">
			<Dbutton :btnTxt="btnTxt"></Dbutton>
		</view>
	</view>
</template>

<script>
	import Dsteps from '../../components/steps.vue'
	import Dbutton from '../../components/button.vue'
	import SendCode from '../../components/sendCode.vue'
	import { fillInfo, companySign } from '../../api/identificationApi.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				titles: [
					{
						id: 1,
						name: '机构签署'
					},
					{
						id: 2,
						name: '客户签署'
					},
					{
						id: 3,
						name: '支付费用'
					},
					{
						id: 4,
						name: '签约完成'
					},
				],
				date1: currentDate,
				date2: currentDate,
				isShowDate1: false,
				isShowDate2: false,
				sex: [
					{
						id: 1,
						name: '男'
					},
					{
						id: 2,
						name: '女'
					}
				],
				current1: -1,
				current2: -1,
				btnTxt: '开始签约',
				form: {
					id: '',
					father_name: '',
					father_mobile: '',
					father_mobile_code: '',
					mother_name: '',
					mother_mobile: '',
					mother_mobile_code: '',
					baby_name: '',
					baby_nickname: '',
					baby_birthday: '',
					baby_sex: '',
					baby2_name: '',
					baby2_nickname: '',
					baby2_birthday: '',
					baby2_sex: '',
				}
			}
		},
		components: {
			Dsteps,
			Dbutton,
			SendCode
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(option) {
			// console.log(option.id)
			this.form.id = option.id - 0
		},
		methods: {
			bindDateChange(e, data) {
				if (data === 'one') {
					this.isShowDate1 = true
					this.date1 = e.target.value
					this.form.baby_birthday = e.target.value
					console.log(data)
				} else {
					this.isShowDate2 = true
					this.date2 = e.target.value
					this.form.baby2_birthday = e.target.value
					console.log(data)
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			radioChange(evt) {
				this.form.baby_sex = evt.target.value - 0
				for (let i = 0; i < this.sex.length; i++) {
					if (this.sex[i].id === evt.target.value) {
						this.current1 = i;
						break;
					}
				}
			},
			radioChangeTwo(evt) {
				this.form.baby2_sex = evt.target.value - 0
				for (let i = 0; i < this.sex.length; i++) {
					if (this.sex[i].id === evt.target.value) {
						this.current2 = i;
						break;
					}
				}
			},
			async startSign() {
				// uni.navigateTo({
				// 	url: './electronicContract'
				// })
				console.log(this.form)
				const isTrue = await this.checkForm()
				// console.log(isTrue)
				if (isTrue) {
					const res = await fillInfo(this.form)
					// console.log(res)
					if (res.data.code === 0) {
						const result = await companySign({id: res.data.data.id})
						window.location.href = result.data.data.url
					}
				}
				
			},
			async checkForm() {
				// if (!this.form.father_name) {
				// 	return uni.showToast({title: '请输入父亲姓名', icon: 'none'})
				// } else if (!this.form.father_mobile) {
				// 	return uni.showToast({title: '请输入父亲手机号', icon: 'none'})
				// } else if (!this.form.father_mobile_code) {
				// 	return uni.showToast({title: '请输入验证码', icon: 'none'})
				// } else if (!this.form.mother_name) {
				// 	return uni.showToast({title: '请输入母亲姓名', icon: 'none'})
				// } else if (!this.form.mother_mobile) {
				// 	return uni.showToast({title: '请输入母亲手机号', icon: 'none'})
				// } else if (!this.form.mother_mobile_code) {
				// 	return uni.showToast({title: '请输入验证码', icon: 'none'})
				// } else if (!this.form.baby_name) {
				// 	return uni.showToast({title: '请输入宝宝大名', icon: 'none'})
				// } else if (!this.form.baby_nickname) {
				// 	return uni.showToast({title: '请输入宝宝小名', icon: 'none'})
				// } else if (!this.form.baby_birthday) {
				// 	return uni.showToast({title: '请选择宝宝生日', icon: 'none'})
				// } else if (!this.form.baby_sex) {
				// 	return uni.showToast({title: '请选择宝宝性别', icon: 'none'})
				// } else {
				// 	return true
				// }
				if (!this.form.mother_name) {
					return uni.showToast({title: '请输入母亲姓名', icon: 'none'})
				} else if (!this.form.mother_mobile) {
					return uni.showToast({title: '请输入母亲手机号', icon: 'none'})
				} else if (!this.form.mother_mobile_code) {
					return uni.showToast({title: '请输入验证码', icon: 'none'})
				} else if (!this.form.baby_name) {
					return uni.showToast({title: '请输入宝宝大名', icon: 'none'})
				} else if (!this.form.baby_nickname) {
					return uni.showToast({title: '请输入宝宝小名', icon: 'none'})
				} else if (!this.form.baby_birthday) {
					return uni.showToast({title: '请选择宝宝生日', icon: 'none'})
				} else if (!this.form.baby_sex) {
					return uni.showToast({title: '请选择宝宝性别', icon: 'none'})
				} else {
					return true
				}
			}
		},
	}
</script>

<style lang="scss">
	.step {
		height: 300rpx;
		background-color: #fedb0d;
	}
	.padd {
		padding: 10rpx 0 0 7rpx;
	}
	/* 清除浮动 */
	.clearfix:before,.clearfix:after{content:"";display:table}
	.clearfix:after{clear:both;}
	.clearfix{zoom:1}
	.uni-input-placeholder {
		color: #999 !important;
		font-size: 30rpx;
	}
	.form {
		position: relative;
		margin: 0 30rpx;
		.form-fa {
			box-sizing: border-box;
			width: 690rpx;
			// height: 239rpx;
			background-color: #fff;
			box-shadow: 0 8rpx 68rpx 0 rgba(0, 0, 0, 0.1);
			border-radius: 2rpx;
			position: absolute;
			left: 0;
			top: -80rpx;
			padding: 0 20rpx;
			
		}
		.top {
			font-family: PingFangSC-Regular;
			height: 119rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #e6e6e6;
			input {
				display: flex;
				flex: 1;
				text-align: right;
			}
			view {
				font-size: 30rpx !important;
				color: #191919;
			}
			view:nth-child(1) {
				padding-left: 10rpx;
			}
			view:nth-child(2) {
				color: #f8362d;
			}
		}
		.top:last-child {
			border-bottom: none;
		}
		.con,.baby {
			box-sizing: border-box;
			width: 690rpx;
			// height: 239rpx;
			background-color: #fff;
			box-shadow: 0 8rpx 68rpx 0 rgba(0, 0, 0, 0.1);
			border-radius: 2rpx;
			margin-top: 296rpx;
			padding: 0 20rpx;
		}
		.baby {
			height: 480rpx;
			margin-top: 20rpx;
		}
		.date {
			display: flex;
			flex: 1;
			justify-content: flex-end;
			padding-right: 20rpx;
		}
		.flex {
			display: flex;
		}
		
	}
	
</style>
